<template>
  <Row class="vm-table vm-panel">
    <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="color: black">
      <h2 class="m-n font-thin pull-left">案例 > Persion> 实例列表</h2>
    </div>

    <div class="wrapper-md text-s">
      <div class="panel panel-default form-horizontal form" role="form" >
        <div class="panel-heading" style="color: cornflowerblue">
          <strong>这是一个小案例</strong>
        </div>
        <Row type="flex" justify="space-between" class="control" style="color: gainsboro">
          <div class="table-style">
            <Button @click="modalAdd = true" style="background-color:#57A3F3;color: floralwhite">
              <Icon type="plus-round"><i class="fa fa-plus"></i></Icon>新建
            </Button>
          </div>
        </Row>

        <!-- 2.2 显示内容表格 -->
        <Table stripe
               :data="tableData"
               :columns="tableColumns"
               @on-select="onSelect"
               @on-select-all="onSelectAll"
               @on-selection-change="onSelectionChange"
               size="large">
        </Table>
        <!-- 2.3 分页导航navigation -->
        <Row type="flex" justify="space-between" class="footer">
          <div></div>
          <div style="margin: 10px;overflow: hidden">
            <Page :total="total"
                  @on-page-size-change="pageSizeChange"
                  @on-change="changePage"
                  :current="page.page"
                  :pageSize="page.size" size="small"
                  placement="top" show-elevator show-sizer ></Page>
          </div>
        </Row>
        <!-- 新增modal -->
        <Modal
          v-model="modalAdd"
          title="新增用户"
          ok-text="OK"
          cancel-text="Cancel"
          @on-ok="modalAddOk('formAddData')"
          @on-cancel="modalAddCancel('formAddData')">
          <Form v-model="formAddData">
            <FormItem>
              <Input type="text" v-model="formAddData.name" placeholder='请输入用户名'>
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Input type="text" v-model="formAddData.age" placeholder='请输入年龄'>
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
          </Form>
        </Modal>
        <!-- 编辑modal -->
        <Modal
          v-model="modalEdit"
          title="编辑用户"
          ok-text="OK"
          cancel-text="Cancel"
          @on-ok="modalEditOk()"
          @on-cancel="modalEditCancel('formEditData')">
          <Form v-model="formEditData" ref="formEditData">
            <FormItem>
              <Input type="text" v-model="formEditData.id" disabled>
              <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Input type="text" v-model="formEditData.name">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Input type="text" v-model="formEditData.age">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
          </Form>
        </Modal>
        <!-- 删除modal -->
        <Modal
          v-model="modalDelete"
          title="删除用户"
          ok-text="OK"
          cancel-text="Cancel"
          @on-ok="modalDeleteOk">
          您确定删除吗？
        </Modal>
      </div>
    </div>

  </Row>

</template>
<script>
  export default {
    data () {
      return {
        data: {},
        total: 10,
        page: {
          size: 5,
          page: 1
        },
        searchUrl: '/person',
        title: '用户管理',
        tableData: [],
        tableColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '年龄',
            key: 'age'
          },

          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editShow(params)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.editRemove(params)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
// modal显示：新增、删除、编辑
        modalAdd: false,
        modalDelete: false,
        modalEdit: false,
        // 新增表单选项
        formAddData: {
          name: '',
          age: ''
        },
        // 编辑表单选项
        formEditData: {
          name: '',
          age: ''
        }
      }
    },
    methods: {
      // 分页查询
      searchDatas: function (page, size) {
        this.searchUrl = '/person'
        this.data = {
          page: {
            page: page,
            size: size

          }
        }
        this.searchPost(this.searchUrl, this.data)
      },
      // 改变页数
      changePage: function (page) {
        this.page.page = page
        this.getAllPerson(this.page)
        console.log(this.page)
      },
      pageSizeChange: function (pageSize) {
        this.page.size = pageSize
      },
      // 新增modal 确定按钮
      modalAddOk () {
        this.$http.post('/person', this.formAddData).then(
          function (res) {
            if (res.status === 200) {
              this.$Message.success('保存成功')
              this.getAllPerson(this.page)
            } else {
              this.$Message.error('保存失败')
            }
          }
        )
      },
      // 新增modal 取消按钮
      modalAddCancel (name) {
        this.$refs[name].resetFields()
      },
      // 编辑modal 确定按钮
      modalEditOk () {
        this.$http.put('/person/' + this.formEditData.id, this.formEditData).then(
          function (res) {
            if (res.status === 200) {
              this.$Message.success('更新成功')
              // 重新刷新当前页面
              this.getAllPerson(this.page)
            } else {
              this.$Message.error('更新失败')
            }
          }
        )
      },
      // 编辑modal 取消按钮
      modalEditCancel (name) {
        this.$refs[name].resetFields()
      },
      // 删除model 确定按钮
      modalDeleteOk () {
        // 验证是否有要删除的用户
        if (this.batchDelete.length === 0) {
          this.$Message.error('请选择删除的用户')
          return
        }
        // 批量删除
        this.$http.delete('/person/' + this.batchDelete).then(
          function (res) {
            if (res.status === 200) {
              this.$Message.success('删除成功')
              this.getAllPerson(this.page)
            } else {
              this.$Message.error('删除用户失败')
            }
          }
        )
      },
      // 数据显示 的 编辑按钮
      editShow (params) {
        this.formEditData.id = params.row.id
        this.formEditData.name = params.row.name
        this.formEditData.age = params.row.age
        this.modalEdit = true
      },
      // 数据显示 的 删除按钮
      editRemove (params) {
        this.batchDelete = []
        this.batchDelete.push(params.row.id)
        this.modalDelete = true
      },
      // 数据表格 多选情况下的 选择回调
      onSelect (selection, row) {
        this.batchDelete = []
        for (let i = 0; i < selection.length; i++) {
          this.batchDelete.push(selection[i].id)
        }
      },
      // 数据表格 多选情况下 全选回调
      onSelectAll (selection) {
        this.batchDelete = []
        for (let i = 0; i < selection.length; i++) {
          this.batchDelete.push(selection[i].id)
        }
      },
      // 数据表格 多选情况下 修改选择回调
      onSelectionChange (selection) {
        this.batchDelete = []
        for (let i = 0; i < selection.length; i++) {
          this.batchDelete.push(selection[i].id)
        }
      },
      getAllPerson (page) {
        var pp = parseInt(page.page) - 1
        this.$http.get('/person?page=' + pp + '&size=' + page.size).then(
          (res) => {
            if (res.status === 200) {
              console.log(res.body)
              this.tableData = res.body.body.content
              this.total = res.body.body.totalElements
            }
          }
        )
      }
    },
    created () {
      this.getAllPerson(this.page)
    }
  }
</script>
